<template>
  <router-link v-if="avatarFlag" class="router-link" :to="{name:'login'}"><div class="register"><span class="textReg">登录/注册</span></div></router-link>
  <el-dropdown v-else>
    <div class="login">
      <el-avatar :size="avatarSize">{{ userData.userName }} </el-avatar>
    </div>
    <el-dropdown-menu style="width: 150px;" slot="dropdown">
      <el-dropdown-item  class="hoverMenu hoverMenuBlock"><i  class="el-icon-s-operation "></i><span class="hoverMenuText">设置</span></el-dropdown-item>
      <div @click="loginOut()" ><el-dropdown-item  class="hoverMenu hoverMenuBlock" ><i  class="el-icon-switch-button "></i><span class="hoverMenuText">注销</span></el-dropdown-item></div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>

import {Storage} from "@/utils/localStorage";
const storage = new Storage();

export default {
  name: "Avatar",
  data() {
    return {
      avatarFlag:true,
      avatarSize:45,
      userData: []
    };
  },
  methods: {
    loginOut(){

      localStorage.removeItem("user");
      let path = this.$router.currentRoute.fullPath
      if (path='/'){
        window.location.reload();
      }else {
        this.$router.push('./');
      }

     console.info()



    }
  },
  created() {
    // 设置头像的逻辑显示

      let user =storage.getItem("user")
      if (user){
        this.avatarFlag=false;
        this.userData = user;
        // console.info("this.userData",this.userData)
      }


  }
}
</script>

<style scoped>

.router-link {
  text-decoration: none;
}

.textReg {
  color: #fff;
}

.register:hover{
  background-color: #6595e5;
}

.login {
  display: flex;
  width: 70px;
  height: 60px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  /*border-radius: 4px;*/
  cursor: pointer
}


/*注册bq块*/
.register {
  display: flex;
  background-color: #0052d9;
  width: 100px;
  height: 60px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  /*border-radius: 4px;*/
  cursor: pointer
}

/*强制覆盖hoverMenu列表项的宽度*/
.hoverMenuBlock{
  height: 40px! important;
}

/*hoverMenu列表项文字的大小和居中*/
.hoverMenuText{
  font-size: 15px;
  margin-bottom: 1px;
  margin-left: 5px;
}

/*使列表项按钮文字居中*/
.hoverMenu {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*自定义图标的大小*/
/*hoverMenu*/
.el-icon-s-operation {
  font-size: 19px;
}
/*hoverMenu*/
.el-icon-switch-button{
  font-size: 19px;
}
</style>